<!--手动开仓-->
<template>
  <div class="bg bg1" @rightBtn="rightBtn">

    <list class="all">
      <!--刷新-->
      <refresh class="refresh" @refresh="refresh" :display="isRefresh ? 'show' : 'hide'">
        <loading-indicator class="load text1"></loading-indicator>
      </refresh>

      <template v-if="asset">
        
        <!--手动开仓内容-->
        <cell class="content">

          <VASelect class="size" 
          v-model="fx" 
          :title="T('委托方向')" 
          :selects="fxs" 
          @select="fxChange" />

          <VASelect class="size" 
          v-model="type" 
          :title="T('委托类型')" 
          :selects="types" 
          @select="typeChange" />

          <VAInput class="size mb30" v-if="type == 0"
          v-model="price" 
          :decimal="2" 
          :title="T('委托价格')" 
          :placeholder="T('请输入委托价格')" 
          :unit="asset.baseCoin"
          @input="priceChange" />
          <div class="size mb30" v-if="type == 1">
            <text class="font30 text2 title">{{T('委托价格')}}</text>
            <div class="frame bg3">
              <text class="font30 fontz text3 all">{{T('已当前最优价格交易')}}</text>
            </div>
          </div>
          <div class="row jend">
            <text class="font24 fontz text3" v-if="last">{{T('行情价')+' '+last+' '+asset.baseCoin}}</text>
            <text class="font24 fontz text3" v-else>{{T('行情价')+' --'}}</text>
          </div>

          <VAInput class="size"
            v-model="num" 
            :decimal="2" 
            :title="T('数量')" 
            :placeholder="T('请输入委托数量')" 
            :unit="asset.counterCoin"
            @input="numChange" />

          <VAInput class="size mb30"
            v-model="money" 
            :decimal="2" 
            :title="T('成交额')" 
            :placeholder="T('请输入委托金额')" 
            :unit="asset.baseCoin"
            @input="moneyChange" />

          <div class="row jend ">
            <text class="font24 fontz text3">{{T('可用')+' '+asset.baseCoinAvailable+' '+asset.baseCoin}}</text>
          </div>
       
          
          <div class="row jcenter">
            <div class="ok"  :class="[Config.upDownBg(1)]" @click="okClick">
              <text class="font30 fontz text1">{{T('买入')}}</text>
            </div>
          </div>
        </cell>
        
        <!--菜单-->
        <cell>
          <div class="line bg2"></div>
          <VSubMenu class="menu bk4" :type="0" :menu="menu" :menus="menus" @menuClick="menuClick" />
        </cell>

        <!--当前委托-->
        <cell class="list" v-if="menu==0">

          <div class="row mb10">
            <text class="font24 text3 all2 mr10">{{T('数量')}}</text>
            <text class="font24 text3 all2 mr40">{{T('价格')+'('+asset.baseCoin+')'}}</text>
            <text class="font24 text3 all3 mr10">{{T('时间')}}</text>

            <div class="row jcenter all2">
              <text class="font24 text3">{{T('操作')}}</text>
            </div>
          </div>

          <div class="cell" v-for="(item, index) in datas" :key="'datas'+index">

            <text class="font24 text2 all2 mr10" v-if="item.price">{{T(item.amount)}}</text>
            <text class="font24 text2 all2 mr10" v-else>{{'--'}}</text>

            <text class="font24 all2 mr40" v-if="item.price" :class="[Config.upDownFont(1)]">{{item.price}}</text>
            <text class="font24 text2 all2 mr40" v-else>{{T('市价')}}</text>

            <text class="font24 text2 all3 mr10">{{item.timeStr}}</text>

            <div class="row jcenter all2">
              <div class="but-cx" @click="httpsCancelManualOrder(item, index)">
                <text class="font24 main-t1">{{T('撤销')}}</text>
              </div>
            </div>
          </div>

          <div class="genduo">
            <text class="font22 text3">{{T('没有更多数据')}}</text>
          </div>
        </cell>

        <!--成交记录-->
        <cell class="list" v-if="menu==1">

          <div class="row mb10">
            <text class="font24 text3 all2 mr10">{{T('类型')}}</text>

            <text class="font24 text3 all2 mr40">{{T('成交数量')}}</text>

            <text class="font24 text3 all2 mr10">{{T('价格')+'('+asset.baseCoin+')'}}</text>
            
            <text class="font24 text3 all3 tRight">{{T('时间')}}</text>
          </div>

          <div class="cell" v-for="(item, index) in historys" :key="'historys'+index">
            <text class="font24 text2 all2 mr10">{{item.state}}</text>

            <text class="font24 text2 all2 mr40">{{T(item.dealAmount)}}</text>

            <text class="font24 all2 mr10" :class="[Config.upDownFont(1)]">{{item.dealPrice}}</text>

            <text class="font24 text2 all3 tRight">{{item.timeStr}}</text>
          </div>
          
          <div class="genduo" v-if="pageMax">
            <text class="font22 text3">{{T('没有更多数据')}}</text>
          </div>
        </cell>

        <loading v-if="menu==1 && !pageMax" 
        class="refresh" :display="isLoadinging ? 'show' : 'hide'"
        @loading="httpsQueryFinishOrderList">
          <loading-indicator class="load text1"></loading-indicator>
        </loading>
      </template>
    </list>
  </div>
</template>

<script>

import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jhttps from "@/_js/https";
import jconfig from "@/_js/config";
import jtime from "@/_js/time";
import mPair from "@/up/amPair";


import VAInput from "@/_public/VAInput.vue";
import VASelect from "@/_public/VASelect.vue";
import VSubMenu from '@/_public/VSubMenu.vue'

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("手动开仓"));
export default {

  components: {
    VAInput,
    VASelect,
    VSubMenu
  },
  
  data() {
    return {
      T:T,
      Config:jconfig,

      fx:0,
      fxs:[T('买入')],

      type:0,
      types:[T('限价委托'), T('市价委托')],

      last:'', //行情价
      price:'', //价格
      num:'', //数量
      money:'', //金额

      menu: 0,
      menus:[T('手动委托'), T('成交记录')],


      executeId:'',
      asset:undefined, //策略资产
      maxNum:'--', //最大买入

      isRefresh:false, //显示刷新
      isLoadinging:false, //显示加载
      pageNo:0, //页码
      pageMax:false, //turn最大页面
      
      datas: [], //手动委托
      historys: [], //成交记录
    };
  },

  mounted() {
    
    jconfig.init(()=>{

      this.state = jnavigator.getParam("state");
      this.zycwms = jnavigator.getParam("zycwms");
      this.executeId = jnavigator.getParam("executeId");
      this.refresh();
    },[jconfig.OPT_UP_DOWN]);

    // setTimeout(() => {
    //   var param = {'executeId':this.executeId};
    //   jnavigator.load('', 'run/RunOp', param);
    // }, 10000);

    //消息回调
    this.message = (last, increase)=>{
      var bol = !this.last;
      this.last = last;
      bol && this.moneyChange();
    }
  },

  //移除时触发
  destroyed(){
    mPair.unSubscribes(this.asset);
  },

  computed: {

  },

  methods: {
    
    refresh() {
      if (this.isRefresh) return;
      this.isRefresh = true;
      this.httpsQueryManualFreeAsset();
    },

    /********************************** HTTP*/
    //http获取资产
    httpsQueryManualFreeAsset() {
      
      var param = {'executeId': this.executeId};
      jhttps.post("manualStrategy/queryManualFreeAsset",param,true,(data) => {

          this.isRefresh = false;
          if (data.status == 200) {

            var asset = data.data;
            asset.baseCoin = asset.baseCoin.toUpperCase();
            asset.counterCoin = asset.counterCoin.toUpperCase();
            this.asset = asset;
            mPair.subscribes(this.asset, this.message);

            this.menuClick(this.menu);
          } else {
            jmodal.toast(data.msg);
          }
        }
      );
    },

    //http下单
    httpsPlaceManualOrder() {

      jmodal.showLoad();
      var param = {'executeId': this.executeId, //执行编号
                    'side': "buy", //buy ：买，sell 卖
                    'orderType': this.type ? 'market' : 'limit', //limit 限价单，market 市价单
                    'amount': this.type ? this.money : this.num,
                    'price': this.price};//数量
      jhttps.postX("manualStrategy/placeManualOrder",param,true,(data) => {
          jmodal.hideLoad();
          if (data.status == 200) {

            jmodal.toast(T('委托成功'));
            this.price = '';
            this.num = '';
            this.money = '';
            this.refresh();
          } else {
            jmodal.toast(data.msg);
          }
        }
      );
    },

    //http撤单
    httpsCancelManualOrder(item, index) {

      jmodal.showLoad();
      var param = {'executeId': this.executeId, 'orderId':item.orderId};
      jhttps.postX("manualStrategy/cancelManualOrder",param,true,(data) => {
          jmodal.hideLoad();
          if (data.status == 200) {
            this.datas.splice(index, 1);
            jmodal.toast(T('撤销成功'));
          } else {
            jmodal.toast(data.msg);
          }
        }
      );
    },

    //http委托列表
    httpsQueryOpenOrderList() {

      jmodal.showLoad();
      var param = {'executeId': this.executeId};
      jhttps.post("manualStrategy/queryOpenOrderList",param,true,(data) => {
          jmodal.hideLoad();
          if (data.status == 200) {

            var datas = data.data;
            datas.forEach((item)=>{
              item.timeStr = jtime.getTime(item.orderTime, 'M/d H:m');
            })
            this.datas = datas;
          } else {
            jmodal.toast(data.msg);
          }
        }
      );
    },

    //http完成列表
    httpsQueryFinishOrderList() {
      
      var pageSize = 20;
      this.pageNo == 0 ? jmodal.showLoad() : this.isLoadinging = true;
      var param = {'executeId': this.executeId, "pageNo": this.pageNo+1, pageSize};
      jhttps.post("manualStrategy/queryFinishOrderList",param,true,(data) => {
          this.pageNo == 0 ? jmodal.hideLoad() : this.isLoadinging = false;
          if (data.status == 200) {

            var datas = data.data;
            datas.forEach((item)=>{
              item.timeStr = jtime.getTime(item.finishTime, 'M/d H:m');
              item.state = Number(item.amount) == Number(item.dealAmount) ? T('全部成交') : T('部分成交');
            })

            if (this.pageNo==0) {
              this.historys = datas;
            } else {
              this.historys.push(...datas);
            }

            this.pageNo = this.pageNo + 1;
            this.pageMax = datas.length < pageSize;
          } else {
            jmodal.toast(data.msg);
          }
        }
      );
    },

    /******************************* 点击 */
    //方向改变
    fxChange(fx) {
      this.fx = fx;
    },

    //类型改变
    typeChange(type) {
      this.type = type;

      this.price = '';
      this.num = '';
      this.money = '';
    },

    //价格改变
    priceChange() {

      if (this.price=='') {
        this.num = '';
        return;
      }

      this.moneyChange();
    },

    //数量改变
    numChange() {
      
      var price = this.type==1 ? this.last : this.price;
      if (price=='' || !this.num) {
        this.money = '';
        return;
      }

      var money = jmath.cheng(this.num, price);
      money = jmath.gfCoin(money, this.asset.baseCoin);
      this.money = money;
    },

    //成交额改变
    moneyChange() {
      
      var price = this.type==1 ? this.last : this.price;
      if (price=='' || !this.money) {
        this.num = '';
        return;
      }

      var num = jmath.chu(this.money, price);
      num = jmath.gfCoin(num, this.asset.baseCoin);
      this.num = num;
    },

    //确定
    okClick() {

      if (this.state == 'SUSPEND') {
          jmodal.toast(T('暂停状态下无法开仓'));
        return;
      }

      if (this.zycwms) {
          jmodal.toast(T('只有止盈仓位模式为[一次性止盈]时, 才支持手动开仓'));
        return;
      }

      if (this.type == 0) {

        if (this.price == '') {
          jmodal.toast(T('请输入委托价格'));
          return;
        }

        if (Number(this.price) <= 0) {
          jmodal.toast(T('委托价格不可为0'));
          return;
        }
      }


      if (this.num == '' || this.money== '') {
        jmodal.toast(T('请输入数量或者成交额'));
        return;
      }

      if (Number(this.num) <= 0 || Number(this.money) <= 0) {
        jmodal.toast(T('委托数量或成交额不可为0'));
        return;
      }

      if (Number(this.money) > Number(this.asset.baseCoinAvailable)) {
        jmodal.toast(T('可用余额不住'));
        return;
      }

      this.httpsPlaceManualOrder();
    },

    //菜单点击
    menuClick(menu) {
      this.menu = menu;

      if (menu == 0) {
        this.httpsQueryOpenOrderList();
      } else if (menu == 1) {
        this.pageNo = 0;
        this.httpsQueryFinishOrderList();
      }
    }
  },
};
</script>

<style src="@/_css/style.css" ></style>
<style scoped>
.bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
}

.content {
  padding: 0 40px;
}
.size {
  margin-top: 30px;
  flex-direction: row;
  align-items: center;
}
.title{
  width: 170px;
  margin-right: 20px;
}
.frame{
  flex: 1;
  flex-direction: row;
  align-items: center;

  height: 88px;
  border-radius: 10px;

  border-width: 2px;
  border-color: transparent;

  padding: 0 30px;
}
.ok {
  align-items: center;
  justify-content: center;
  width: 470px;
  height: 78px;
  border-radius: 10px;
  margin: 60px 0;
}

.line {
  height: 8px;
}
.menu {
  height: 86px;
  border-bottom-width: 1px;
}

.list {
  padding: 40px;
}
.cell {
  flex-direction: row;
  align-items: center;
  height: 80px;
}
.but-cx {
  align-items: center;
  justify-content: center;
  min-width: 94px;
  height: 40px;
  background-color: rgba(22, 119, 254, 0.2);
  border-radius: 4px;
  padding: 0 20px;
}


/*********************** 刷新*/
.refresh {
  width: 750;
  flex-direction: row;
  justify-content: center;
}
.load {
  margin-top: 16px;
  height: 40px;
  width: 40px;
}
.genduo {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100px;
}
</style>
